<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="${hello}"></p>
<!--
model.addAttribute("hello","hello world <input>");
th:text----标签当成字符串展示，不解析
th:utext---标签解析展示

<p>:块状元素标签，内容占满一行，标签后的内容会自动到下一行
<span></span>:行元素标签，内容多少就占多少空间，后面内容接在后面显示
-->
<p th:utext="${hello}"></p>
<p th:text="${hello}" />
<!--解析时"|${hello}|"会在p标签属性位置，就不会再标签内容位置了-->
<p th:text="|${hello}|" />
<form th:action="@{/demo/test}">
    <input th:type="text" th:name="id">
    <button>提交</button>
</form>

<!--原生写法也可以
    <form action="/demo/test">-->
    <!--<input type="text" name="id">-->
    <!--<button>提交</button>-->
<!--</form>-->
<table>
    <tr>
        <td>下标</td>
        <td>编号</td>
        <td>姓名</td>
        <td>住址</td>
    </tr>
    <!--user元素名称随便起，userStat集合别名，随便起-->
    <!--
    userStat:遍历状态/集合别名
    index:从0开始的索引角标
    count:遍历元素的个数，从1开始
    size:总元素个数
    current:当前遍历的元素userStat.current==u
    even/odd:奇偶
    first/last:第一行或最后一行
    -->

    <tr th:each="u,userStat:${userList}">
        <td>
            <span th:text="${userStat.index}"></span>
        </td>
        <td th:text="${u.id}"></td>
        <td th:text="${u.name}"></td>
        <td th:text="${u.address}"></td>
    </tr>
</table>
<div th:each="map,mapStat:${dataMap}">
    <div th:text="${map}"></div>
    key:<span th:text="${mapStat.current.key}"></span><br/>
    value:<span th:text="${mapStat.current.value}"></span><br/>
    <!--直接map.value也是可以的mapStat.current取到的也是map元素-->
    value:<span th:text="${map.value}"></span><br/>
    ===============================
</div>

<div th:each="nm,nmStat:${names}">
    <span th:text="${nmStat.count}"></span>
    <span th:text="${nm}"></span>
    ============
</div>

<div>
    <span th:text="${#dates.format(now,'yyyy-MM-dd hh:mm:ss')}"></span>
</div>
<div>
    <!--视频虽然说（）不能少，
    但是${age>=18}不写（）也可以，写了（）为了表示一个完整的表达式，逻辑更清晰一点-->
    <!--if成立了展示-->
    <span th:if="${(age>=18)}">终于成年了</span>
    <!--unless不成立才展示-->
    <span th:unless="${(age>=18)}">没成年</span>
</div>

<div id="W" th:include="f/footer::copy"></div>
需求：使用js来接收java后端Model传过来的值
1.要加上th:inline="javascript"属性
2.要用两个中括号，即[[]]，才能继续引用
取值，集合也是一样,前端自动转化为JSON

<script th:inline="javascript">
    var h = [[${hello}]];
    var user = [[${userList}]];
</script>




</body>
</html>